<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<html>
	<head>
		<title>有功功率曲线</title>
		<link id=style href="../styles/theme/blue/frame.css" type="text/css"
			rel="stylesheet" />
		<style type="text/css">
.divLinechart {
	width: 100%;
}
</style>
		<link id="easyuiTheme" rel="stylesheet" type="text/css"
			href="<s:url value='../jquery-easyui/themes/stategrid/easyui.css'/>">
		<link rel="stylesheet" type="text/css"
			href="<s:url value='../jquery-easyui/themes/icon.css'/>">

		<script type='text/javascript'
			src="<s:url value='../ajax-pushlet-client.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../jquery-easyui/jquery-1.7.2.min.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../jquery-easyui/locale/easyui-lang-zh_CN.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../js/common/highcharts.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../js/common/highChartsTheme.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../js/common/jquery.blockUI.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../js/common/curveCommon.js' />"></script>

		<script>
function onData(event){
	//debugger;
	var activePowerData = event.get("activePowerData");
	if(event.get("pnfn") != "" && event.get("pnfn") != undefined && event.get("pnfn") == "0101010a") { // 处理有功功率曲线返回数据
    	$("#tActivePowerData").val(activePowerData);
    }
    else if(event.get("pnfn") != "" && event.get("pnfn") != undefined && event.get("pnfn") == "0101020a") {// 处理A相有功功率曲线返回数据
    	$("#aActivePowerData").val(activePowerData);
    }
    else if(event.get("pnfn") != "" && event.get("pnfn") != undefined && event.get("pnfn") == "0101040a") {// 处理B相有功功率曲线返回数据
    	$("#bActivePowerData").val(activePowerData);
    }
    else if(event.get("pnfn") != "" && event.get("pnfn") != undefined && event.get("pnfn") == "0101080a") {// 处理C相有功功率曲线返回数据
    	$("#cActivePowerData").val(activePowerData);
    }
    
    // 如果总ABC三相的响应都返回后，绘制折线图
    if ($("#tActivePowerData").val() != "" && $("#aActivePowerData").val() != "" && $("#bActivePowerData").val() != "" && $("#cActivePowerData").val() != "" && $("#tActivePowerData").val() != undefined  && $("#aActivePowerData").val() != undefined && $("#bActivePowerData").val() != undefined && $("#cActivePowerData").val() != undefined ) {
	    // 准备总、A、B、C相有功功率
	    var tActivePowerDataArr = $("#tActivePowerData").val().split(":");
	    var aActivePowerDataArr = $("#aActivePowerData").val().split(":");
	    var bActivePowerDataArr = $("#bActivePowerData").val().split(":");
	    var cActivePowerDataArr = $("#cActivePowerData").val().split(":");
	    var startTime = event.get("startTime");
		
		var tActivePowerDataArrDouble = new Array();
		var aActivePowerDataArrDouble = new Array();
		var bActivePowerDataArrDouble = new Array();
		var cActivePowerDataArrDouble = new Array();
		for (var i=0; i<aActivePowerDataArr.length; i++) {
			tActivePowerDataArrDouble[i] = parseFloat(tActivePowerDataArr[i]);
			aActivePowerDataArrDouble[i] = parseFloat(aActivePowerDataArr[i]);
			bActivePowerDataArrDouble[i] = parseFloat(bActivePowerDataArr[i]);
			cActivePowerDataArrDouble[i] = parseFloat(cActivePowerDataArr[i]);
		}
		
		// 修正各曲线的最大值
		var tCorrectYAxisMax = correctYAxisMax(tActivePowerDataArrDouble, 2/3);
		var aCorrectYAxisMax = correctYAxisMax(aActivePowerDataArrDouble, 2/3);
		var bCorrectYAxisMax = correctYAxisMax(bActivePowerDataArrDouble, 2/3);
		var cCorrectYAxisMax = correctYAxisMax(cActivePowerDataArrDouble, 2/3);
		
		var maxVal = -999999999;
		maxVal = tCorrectYAxisMax > maxVal ? tCorrectYAxisMax : maxVal;
		maxVal = aCorrectYAxisMax > maxVal ? aCorrectYAxisMax : maxVal;
		maxVal = bCorrectYAxisMax > maxVal ? bCorrectYAxisMax : maxVal;
		maxVal = cCorrectYAxisMax > maxVal ? cCorrectYAxisMax : maxVal;
		maxVal = maxVal > 0 ? maxVal : 10;
		
		// 修正各曲线的最小值
		var tCorrectYAxisMin = correctYAxisMin(tActivePowerDataArrDouble, 2/3);
		var aCorrectYAxisMin = correctYAxisMin(aActivePowerDataArrDouble, 2/3);
		var bCorrectYAxisMin = correctYAxisMin(bActivePowerDataArrDouble, 2/3);
		var cCorrectYAxisMin = correctYAxisMin(cActivePowerDataArrDouble, 2/3);
		
		var minVal = 0;
		minVal = tCorrectYAxisMin < minVal ? tCorrectYAxisMin : minVal;
		minVal = aCorrectYAxisMin < minVal ? aCorrectYAxisMin : minVal;
		minVal = bCorrectYAxisMin < minVal ? bCorrectYAxisMin : minVal;
		minVal = cCorrectYAxisMin < minVal ? cCorrectYAxisMin : minVal;
		
		// 准备时间
		var time = new Array();
		time[0] = startTime;
		var date= new Date(Date.parse(startTime.replace(/-/g,   "/"))); 
		for (var i=1; i<aActivePowerDataArr.length; i++) {
		
			var date2Minsec = date.getTime();
		
			var addFifteen = 1000 * 60 * 15;
			date2Minsec += addFifteen;
			date = new Date(date2Minsec);
			time[i]= date2Str(date);
		}
	
		// 创建折线图，生成后放置在id为container的div中
		titleText = "有功功率曲线";
		colors = fourPhaseColor;
		yAxisText = "有功功率(kW)";
		unit = "kW";
		seriesVal = [{
			name: '有功功率',
			data: tActivePowerDataArrDouble
		}, {
			name: 'A相有功功率',
			data: aActivePowerDataArrDouble
		}, {
			name: 'B相有功功率',
			data: bActivePowerDataArrDouble
		},{
			name: 'C相有功功率',
			data: cActivePowerDataArrDouble
		}];
		var container = parent.window.frames["lineChart"].document.getElementById("container");
		var chart = showChart(container, titleText, startTime, colors, time, yAxisText, maxVal, minVal, unit, seriesVal);
    }
}

// pushlet ajax开始，监听/source/activePower的报文
PL._init();
PL.joinListen('/source/activePower');
</script>
	</head>
	<body style="overflow-y: hidden; overflow-x: hidden">
		<input type="hidden" name="tActivePowerData" id="tActivePowerData" />
		<input type="hidden" name="aActivePowerData" id="aActivePowerData" />
		<input type="hidden" name="bActivePowerData" id="bActivePowerData" />
		<input type="hidden" name="cActivePowerData" id="cActivePowerData" />
		<div class="divLinechart" id="container">
		</div>
	</body>
</html>
